<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>vue-组件</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        #app{
            background-color: skyblue;
            width: 500px;
            height: 500px;
            /* font-size: 0; */
        }
        .app{
            font-size: 16px;
        }
        .test-component{
            background-color: brown;
            width: calc( 50% - 2.5px );
            height: 250px;
            display: inline-block;
            font-size: 16px;
        }
        span{
            min-width: 40px;
            max-width: 50px;
            /* overflow: hidden; */
            display: inline-block;
        }
    </style>
</head>
<body>
    <div id='app'>
        <div class="app">
            <span>{{msg1}}</span>
            <input type="text" v-model='msg1'>
            <span>{{msg2}}</span>
            <input type="text" v-model='msg2'>
            <button abled>button</button>
        </div>
        <test-component :msg1='msg1' :msg2='msg2'></test-component>
        <test-component :msg2='msg2'></test-component>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>   
    <script>
        // 定义组件,需在实例化前注册
        Vue.component('test-component',{
            props:['msg1','msg2'],
            template:`<div class='test-component'>{{msg1}} {{msg2 + "测试"}}</div>`
        })

        // 实例化
        var vm = new Vue({
            el:'#app',
            data:{
                msg1:'msg1',
                msg2:'msg2',
            },
        })

        
    </script> 
</body>
</html>